import React, { Component, Fragment } from "react";
// antd
import { DatePicker, Row, Col, Card, Button, Statistic } from "antd";

// http
import http from '../../../utils/request';


// bizcharts
import { Chart, Tooltip, Legend, Facet } from 'bizcharts';

import moment from 'moment';

const getTypeColor = type => {
    if (type === '总告警') { return '#1890ff'; }
    if (type === '阈值告警') { return '#2fc25b'; }
    if (type === '事件告警') { return '#facc14'; }
}


const { RangePicker } = DatePicker;

class Dashboard2 extends Component {
    constructor(props){
        super(props);
        this.state = {
            threshold_count: null,
            threshold_count_none: null,
            event_count: null,
            event_count_none: null,
            total_count: null,
            total_count_none: null,

            business_total_data: [],
            business_threshold_data: [],
            business_event_data: [],
            begin_date: null,
            end_date: null,
            loading: false,
        }
    }

    componentDidMount() {
        this.loadData()
    }

    loadData = () => {
        this.setState({
            loading: true
        })
        const requestData = {
            'operation': 'alarm_business',
            'begin_date': this.state.begin_date,
            'end_date': this.state.end_date,
        }

        const p0 = new Promise(resolve=>{
            http.get('/alarm/dashboard', {params: requestData}).then(response=>{
                resolve(response.data)
            }).catch()

        })

        Promise.all([p0]).then((res)=>{
            const resp_data = res[0]
            const threshold_count = resp_data.count.threshold_count
            const threshold_count_none = resp_data.count.threshold_count_none
            const event_count = resp_data.count.event_count
            const event_count_none = resp_data.count.event_count_none
            const total_count = resp_data.count.total_count
            const total_count_none = resp_data.count.total_count_none
            const business_total_data = resp_data.business.business_total_data
            const business_threshold_data = resp_data.business.business_threshold_data
            const business_event_data = resp_data.business.business_event_data

            this.setState({
                threshold_count: threshold_count,
                threshold_count_none: threshold_count_none,
                event_count: event_count,
                event_count_none: event_count_none,
                total_count: total_count,
                total_count_none: total_count_none,
                business_total_data: business_total_data,
                business_threshold_data: business_threshold_data,
                business_event_data: business_event_data,
                loading: false,
            })
        })
    }

    onChange = (value, dateString) => {
        this.setState({
            begin_date: dateString[0] ? dateString[0] : null,
            end_date: dateString[1] ? dateString[1] : null,
        })
    }

    render(){
        const { threshold_count, event_count, total_count, business_total_data, business_threshold_data, business_event_data, threshold_count_none, event_count_none, total_count_none } = this.state

        return (
            <Fragment>
                        
                <Card>
                    <Row>
                        <space>
                            <RangePicker
                                ranges={{
                                    Today: [moment(), moment()],
                                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                                }}
                                onChange={this.onChange} /> 
                        </space>
                        <span style={{ marginLeft: '15px'}}>
                            <Button type="primary" htmlType="submit" onClick={this.loadData}>搜索</Button>
                        </span>
                    </Row>       
                </Card>

                <Row>
                    <Col span={8}>
                        <Card>
                            <Statistic
                                title="总告警"
                                value={total_count}
                                valueStyle={{ color: '#cf1322' }}
                            />
                            
                            {total_count_none} (缺少标签)
                        </Card>
                    </Col>
                    <Col span={8}>           
                        <Card>
                            <Statistic
                                title="阈值告警"
                                value={threshold_count}
                                valueStyle={{ color: '#cf1322' }}
                            />
                            {threshold_count_none} (缺少标签)
                        </Card>
                    </Col>
                    <Col span={8}>
                        <Card>
                            <Statistic
                                title="事件告警"
                                value={event_count}
                                valueStyle={{ color: '#cf1322' }}
                            />
                            {event_count_none} (缺少标签)
                        </Card>
                    </Col>
                </Row>

                <Row>
                    <Col span={8}>
                        <Card>
                        <Chart autoFit data={business_total_data} height={400} padding={[20, 20, -20, 120]} >
                                <Legend visible={false} />
                                <Tooltip showMarkers={false}/>
                                <Facet
                                fields={['class']}
                                type="rect"
                                columnTitle={{
                                    style: {
                                    fontSize: 14,
                                    fontWeight: 300,
                                    fill: '#8d8d8d'
                                    },
                                }}
                                eachView={(view, facet) => {
                                    view.coordinate().transpose();

                                    if (facet.columnIndex === 0) {
                                    view.axis('business', {
                                        tickLine: null,
                                        line: null,
                                    });
                                    view.axis('value', false);
                                    } else {
                                    view.axis(false);
                                    }
                                    const color = getTypeColor(facet.columnValue);
                                    view
                                    .interval()
                                    .adjust('stack')
                                    .position('business*value')
                                    .color('type', [color, '#ebedf0'])
                                    .size(20)
                                    .label('value*type', (value, type) => {
                                        if (type === '2') {
                                        return null;
                                        }
                                        const offset = (value < 30) ? 10 : -4;
                                        return {
                                        offset,
                                        };
                                    });
                                    view.interaction('element-active');
                                }}
                                />
                            </Chart>
                        </Card>
                    </Col>
                    <Col span={8}>
                        <Card>
                        <Chart autoFit data={business_threshold_data} height={400} padding={[20, 20, -20, 120]} >
                                <Legend visible={false} />
                                <Tooltip showMarkers={false}/>
                                <Facet
                                fields={['class']}
                                type="rect"
                                columnTitle={{
                                    style: {
                                    fontSize: 14,
                                    fontWeight: 300,
                                    fill: '#8d8d8d'
                                    },
                                }}
                                eachView={(view, facet) => {
                                    view.coordinate().transpose();

                                    if (facet.columnIndex === 0) {
                                    view.axis('business', {
                                        tickLine: null,
                                        line: null,
                                    });
                                    view.axis('value', false);
                                    } else {
                                    view.axis(false);
                                    }
                                    const color = getTypeColor(facet.columnValue);
                                    view
                                    .interval()
                                    .adjust('stack')
                                    .position('business*value')
                                    .color('type', [color, '#ebedf0'])
                                    .size(20)
                                    .label('value*type', (value, type) => {
                                        if (type === '2') {
                                        return null;
                                        }
                                        const offset = (value < 30) ? 10 : -4;
                                        return {
                                        offset,
                                        };
                                    });
                                    view.interaction('element-active');
                                }}
                                />
                            </Chart>
                        </Card>
                    </Col>
                    <Col span={8}>
                        <Card>
                        <Chart autoFit data={business_event_data} height={400} padding={[20, 20, -20, 120]} >
                                <Legend visible={false} />
                                <Tooltip showMarkers={false}/>
                                <Facet
                                fields={['class']}
                                type="rect"
                                columnTitle={{
                                    style: {
                                    fontSize: 14,
                                    fontWeight: 300,
                                    fill: '#8d8d8d'
                                    },
                                }}
                                eachView={(view, facet) => {
                                    view.coordinate().transpose();

                                    if (facet.columnIndex === 0) {
                                    view.axis('business', {
                                        tickLine: null,
                                        line: null,
                                    });
                                    view.axis('value', false);
                                    } else {
                                    view.axis(false);
                                    }
                                    const color = getTypeColor(facet.columnValue);
                                    view
                                    .interval()
                                    .adjust('stack')
                                    .position('business*value')
                                    .color('type', [color, '#ebedf0'])
                                    .size(20)
                                    .label('value*type', (value, type) => {
                                        if (type === '2') {
                                        return null;
                                        }
                                        const offset = (value < 30) ? 10 : -4;
                                        return {
                                        offset,
                                        };
                                    });
                                    view.interaction('element-active');
                                }}
                                />
                            </Chart>
                        </Card>
                    </Col>
                </Row>

            </Fragment>
        )
    }
}
export default Dashboard2;